import React, { useState, useEffect, useCallback } from "react";

function useWinSize() {
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  })
  const onResize = () => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
  }
  useEffect(() => {
    // 第二个参数是[] componentDidMount挂载resize componentDidUpdate不执行
    window.addEventListener('resize', onResize)
    return () => {
      // componentWillUnMount卸载resize
      window.removeEventListener('resize', onResize)
    }
  }, [])
  return size
}

export default function TextCustomHook() {
  const size = useWinSize()
  return (
    <div>页面size：{size.width}*{size.height}</div>
  )
}